<template>
    <div class="sinCart" v-for="item in cartList">
    <van-swipe-cell>
        <van-checkbox v-model="item.checked" checked-color="#ee0a24"></van-checkbox>
        <van-card v-if="item.s_good.sale_price"
            width="2.5rem"
            :price="item.s_good.sale_price"
            :origin-price="item.s_good.price"
            :desc="item.s_good.desc"
            :title="item.s_good.name"
            :thumb="item.s_good.s_goods_photos[0].path"
        >
            <template #num>
                <van-stepper v-model="item.num" @change="addNum(item)" theme="round"/>
            </template>
        </van-card>
        <van-card v-else
            width="2.5rem"
            :price="item.s_good.price"
            :desc="item.s_good.desc"
            :title="item.s_good.name"
            :thumb="item.s_good.s_goods_photos[0].path"
        >
            <template #num>
                <van-stepper v-model="item.num" @change="addNum(item)" theme="round" min="1"/>
            </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delHandler(item)" />
        </template>
    </van-swipe-cell>


        
        
    </div>
    <slot name="actBar"></slot>
</template>


<script setup>
import { requestPut } from '@/utils/Request.js';
import { computed, ref, watchEffect} from 'vue';
import { useStore } from 'vuex';

const store=useStore();
defineProps({
    cartList:Array,
    total:Number
})
const emit=defineEmits(['goToAdd','goToDel'])
const addNum=(value)=>{
    emit('goToAdd',value)
}
const delHandler=(value)=>{
    emit('goToDel',value)
}


</script>

<style lang="scss" scoped>
@import '../../../style/base.scss';
    .sinCart{
        margin: .1rem auto;
        box-sizing: border-box;
        width: 100%;
        @include flexSet(space-evenly,center,center);
        .van-checkbox{
            width: .2rem;
            display: inline-block;
        }
        .van-card{
            display: inline-block;
            width: 3.39rem;
            height: 100%;
        }
        .delete-button {
            height: 100%;
        }
    }
    
</style>